<template>
    <view class="container" :class="'theme-' + theme">
        <!-- <view class="addTitle">
                <view class="titleDetail">
                    <view class="" style="text-align:left">
                        <image src="../../static/newh5/fanhui.png" class="yticon"
                            style="width: 13px;height: 20px;color:black" @click="returnIndex()"></image>
                    </view>
                    <view class="titleText" style="flex:1">
                        <b>我的心愿单</b>
                    </view>
                </view>
            </view> -->
        <view v-if="!hasLogin || (lists.length == 0)">
            <empty></empty>
        </view>
        <view v-else class="main_box">
           
            <scroll-view  class="list-scroll-content" scroll-y @scrolltolower="toBottom">
            <view class="list-cell b-b m-t" v-for="(list, index) in lists" :key="index" 
                hover-class="cell-hover" :hover-stay-time="50">
                <view class="up_box">
                    <view>
                        <view class="btnFrame btn">{{statusMapFun(list.status)  }}</view>
                    </view>
                    <view>
                        许愿参与人数：{{ list.userCount }}
                    </view>

                </view>
                <view class="middle_box">
                    <text class="cell-tit font-list">{{ list.title }}</text> 
                    <view class="second-list">
                        发起人：<text >{{ list.name }}</text>
                    </view> 
                </view>
                <view class="cell-tit">{{ list.createTime }}</view>
                <view class="down_box">
                    <view style="display: flex;align-items: center;">
                        <view   class="btnFrame btn" v-if="list.status == '2'" style="margin-right: 5px;"  @click="cancelWish(list)">终止 </view>
                        <view   class="btnFrame btn" v-if="list.status == '0'" style="margin-right: 5px;"  @click="submitWishFun(list)">提交 </view>
                        <view   class="btnFrame btn" v-if="list.status == '0'||list.status == '6'" style="margin-right: 5px;" @click="deleteWish(list)">删除 </view>
                        <view class="btnFrame btn" @click="toDetail(list)">心愿详情</view>
                    </view>

                </view>

            </view>
            <uni-load-more style="background-color: #fff" :status="loadingType"></uni-load-more>
        </scroll-view>
        
        </view>
        <view class="fixed_box">
            <view class="btnFrame btn_bottom" @click="createwish()">创建心愿单</view>
        </view>
       
        <u-popup 
            border-radius="10" 
            v-model="showPopup"
            @close="close" 
            @open="open" mode="center"
            length="70%" :mask="true"
            :closeable="true"
            close-icon-pos="top-right"
        >
        <view class="uni-tip" style="width: 100% !important;">
            <text class="uni-tip-title">加入提示</text>
            <view style="padding: 15px;">
                <text>确认加入该许愿池吗？当人数满足要求后，将由运营人员进行商品寻源，上架后您也可购买该商品</text>
            </view>
            <view class="uni-tip-group-button">
                <view class="btnFrame btn" @click="()=>{showPopup = false}" >取消</view>
                <view class="btnFrame btn" @click="enterWish()">确定加入</view>
            </view>
        </view>
        </u-popup>
        <fjj-condition ref='condition' @touchmove.stop :color="color" :list="menuList" :defaultValue="defaultValue"
            @change="conditionChange" @result="resultConditon" />
    </view>
</template>

<script>
import { goback } from "@/common/utils/navigateBack.js";
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import fjjCondition from '@/components/fjj-condition/fjj-condition.vue';
import {
    mapMutations,
    mapState,

} from 'vuex';
import {
    getInformNoticeList,
    isRead,
    releasePage
} from '../../api/message/message.js'
import {
    getWishList,
    enterWishList,
    cancelWishList,
    deleteWishList,
    submitWish
} from '../../api/wish/wish'
import {wishStatusListCommonMap} from './state'
import empty from "@/components/empty";
import { appid } from "../../common/utils/config";
let timeout = null;
export default {
    components: {
        empty,
        uniLoadMore,
        fjjCondition
    },
    data() {
        return {
            wishStatusListCommonMap,
            showPopup:false,
            lists: [],
            page: 1,
            limit: 12,
            loadingType: 'more',
            color: '#ED3333',
            hasChoose: false,
            param: {},
            currentRecord:{},
            menuList: [{
                'title': '心愿单状态',
                'type': 'custom',
                'key': 'custom3',
                'isMutiple': false, //多选
                'detailList': [
                    {
                    title: '进行中',
                    value: "2",
                    isSelected: true
                    },
                    {
                        title: '草稿',
                        value: '0'
                    },
                    {
                        title: '待审批',
                        value: '1'
                    },
                    {
                        title: '已完成',
                        value: '3'
                    },
                    {
                        title: '已取消',
                        value: '4'
                    },
                    {
                        title: '已结束',
                        value: '5'
                    },
                    {
                        title: '审批不通过',
                        value: '6'
                    },
                    {
                        title: '已上架',
                        value: '7'
                    },
                ],
            }, {
                'title': '许愿状态',
                'type': 'custom',
                'key': 'custom4',
                'isMutiple': false, //多选
                'detailList': [{
                    title: '已加入',
                    isSelected: true,
                    value: '1',
                }, {
                    title: '未加入',

                    value: '0',
                },]
            }, {
                'title': '发布开始时间',
                'type': 'rangetime',
                'key': 'custom5',
                'isMutiple': false, //多选
            }, {
                'title': '发布结束时间',
                'type': 'rangetime',
                'key': 'custom6',
                'isMutiple': false, //多选
            }],
            defaultValue: {},
            statusString: '采购公告,平台公告',
            searchVal: ''
        };
    },
    onShow() {
        console.log('onShow',this.param);
        this.loadData('refresh', this.param)
    },
    onLoad() {
        console.log('onLoad');
        this.loadData('refresh', {})
    },
    // onReachBottom() {
    // 	this.loadData()
    // },
    computed: {
        ...mapState(['hasLogin']),
    },
    onNavigationBarButtonTap(val) {
        this.$refs.condition.visibleDrawer = true;
    },
    onNavigationBarSearchInputChanged(val) {
        console.log(val)
        this.searchVal = val.text
        this.loadData('refresh')
    },
    onNavigationBarSearchInputConfirmed(val) {
        this.searchVal = val.text;
        this.loadData('refresh')
    },
    methods: {
        createwish(){
            uni.navigateTo({
				url: `/pages/wishList/editWishContent`
			})
        },
        toDetail(val){
            const id = val.id;
			uni.navigateTo({
				url: `/pages/wishList/wishContent?id=${id}&type=${'0'}`
			})
        },
        enterWish(){
            console.log('xx',this.currentRecord);
            let param = {
                id: this.currentRecord.id
            }
            enterWishList(param).then((res) => {
                if (res.code === 0) {
                    console.log('xxx');
                    this.showPopup = false
                    this.loadData('refresh', {})
                } else {
                    this.showPopup = false
                    this.$util.msg(res.message)
                }
            })
        },
        statusMapFun(val){
            return this.wishStatusListCommonMap.filter(i=>i.value == val)[0].label
        },  
        openDialog(list){
            if((list.status == '3'||list.status == '7'||list.isJoined)){
                return 
            }
            this.currentRecord = list
            this.showPopup = true
        },
        conditionChange(obj) {
            console.log('obj',obj);
            // let arr = []
            // if (obj.key == 'custom4') {
            //     let isSelect = obj.list.filter(item => {
            //         return item.isSelected == true
            //     })
            //     this.statusString = isSelect.value
            // }
        },
        //筛选返回值
        resultConditon(obj) {
            console.log('search',obj);
            this.$refs.condition.visibleDrawer = false;
            this.hasChoose = obj.hasChoose;

            let param = {
                status: obj.result.custom3,
                isJoined: obj.result.custom4,
                //发布开始时间
                timeMin:timeTurn.call(this,obj.result.custom5[0]),
                timeMax: timeTurn.call(this,obj.result.custom5[1]),
                //发布结束时间
                endTimeMin:timeTurn.call(this,obj.result.custom6[0]),
                endTimeMax:timeTurn.call(this,obj.result.custom6[1]),
            }
            this.page = 1
            this.param = param
            this.loadData('refresh', param)
            function timeTurn(val){
                if(!val){
                    return val
                }
                return val.replace(/\//g,'-')
            }
        },

        returnIndex() {
            goback()
        },
        toBottom() {
            console.log('滑到底');
            this.loadData('refresh', this.param)
        },
        ...mapMutations(['logout']),
        loadData(type, obj) {
            if (type) {
                this.page = 1
            }
            if (this.loadingType === "loading") {
                return;
            }
            this.loadingType = "loading";
            let total = 0;
            let list = [];
            const userInfo = uni.getStorageSync('userInfo')
            console.log('userInfo',userInfo);
            const param = {
                page: this.page,
                limit: this.limit,
                title: this.searchVal,
                userId:userInfo.userId,
                ...obj
                // pageType: 1,
            };
            getWishList(param).then((res) => {
                console.log('res',res);
                if (res.code === 0) {
                    list = res.data.records;
                    // list.forEach((item) => {
                    // 	this.lists.push(item);
                    // });
                    if (type === 'refresh') {
                        this.lists = list;
                    } else {
                        this.lists = this.lists.concat(list);
                    }
                    total = parseInt(res.data.total);
                    if (this.lists.length === total) {
                        this.loadingType = "noMore";
                    } else {
                        this.loadingType = "more";
                    }
                    this.page++;

                } else {
                    this.$util.msg(res.message)
                    this.loadingType = "more";
                }
            });
        },
        // loadData(){
        // 	getInformNoticeList().then(res=>{
        // 		if(res.code == 0){
        // 			console.log('返回内容',res.data);
        // 			this.lists = JSON.parse(JSON.stringify(res.data.records	))
        // 		}
        // 	})
        // },
        //已读确认
        isRead(val) {
            const params = {
                articleId: val
            }
            isRead(params).then(res => {
                console.log('res', res);
            })
        },
        cancelWish(record){
            let params = {
                id:record.id
            }
            cancelWishList(params).then((res) => {
                if (res.code === 0) {
                    this.$util.msg('操作成功！')
                    this.loadData('refresh', {})
                }else{
                    this.$util.msg(res.message)
                }
            })
        },
        submitWishFun(record){
            let params = {
                id:record.id,
                isSave:1,
                details:null
            }
            submitWish(params).then((res) => {
                if (res.code === 0) {
                    this.$util.msg('操作成功！')
                    this.loadData('refresh', {})
                }else{
                    this.$util.msg(res.message)
                }
            })
        },
         deleteWish(record){
            let params = {
                id:record.id
            }
            deleteWishList(params).then((res) => {
                if (res.code === 0) {
                    this.$util.msg('操作成功！')
                    this.loadData('refresh', {})
                }else{
                    this.$util.msg(res.message)
                }
            })
        },
        goDetail(item) {
            debugger
            if (!this.hasLogin) {
                uni.showModal({
                    title: '提示',
                    content: '您还未登录，不能进行此操作',
                    confirmText: '去登录',
                    cancelText: '取消',
                    success: (suc) => {
                        if (suc.confirm) {
                            uni.navigateTo({
                                url: '/pages/public/login'
                            })
                        }
                    }
                })
            } else {
                console.log(item)
                this.isRead(item.id)
                //页面控制已读
                item.isRead = true
                console.log('item', item);
                if (item.colunmsName == '采购公告') {
                    uni.navigateTo({
                        url: `/pages/message/informPurchaseDetail?id=${item.id}&articleType=${item.articleType}&colunmsName=${item.colunmsName}&orderSn=${item.orderSn}`
                    })
                } else {
                    uni.navigateTo({
                        url: `/pages/message/informDetail?id=${item.id}&articleType=${item.articleType}`
                    })
                }

            }
        },
        navTo(url) {
            if (!this.hasLogin) {
                uni.showModal({
                    title: '提示',
                    content: '您还未登录，不能进行此操作',
                    confirmText: '去登录',
                    cancelText: '取消',
                    success: (suc) => {
                        if (suc.confirm) {
                            uni.navigateTo({
                                url: '/pages/public/login'
                            })
                        }
                    }
                })
            } else {
                uni.navigateTo({
                    url
                })
            }
        },

    }
}
</script>

<style lang='scss'>
page {
    background: $page-color-base;
}
.main_box{
    padding-bottom: calc(var(--window-bottom) + 200rpx + 20rpx);
}
.fixed_box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 130rpx;
}
.up_box {
    display: flex;
    justify-content: space-between;
}

.down_box {
    display: flex;
    justify-content: end;
}

.btn {
    line-height: 20px;
    height: 20px;
    // width: 140rpx;
    width:auto;
    min-width: 74px;
    padding: 0 5px 0 5px;
    border-radius: 26rpx;
    border: 2rpx solid #e4e7ed;
    font-size: 26rpx;
    text-align: center;
    color: #82848a;
}
.btn_bottom {
    line-height: 34px;
    height: 34px;
    width: 200rpx;
    // width:auto;
    min-width: 74px;
    padding: 0 5px 0 5px;
    border-radius: 26rpx;
    border: 2rpx solid #e4e7ed;
    font-size: 26rpx;
    text-align: center;
    color: #82848a;
    margin: 0 auto;
}
.btn_not {
    line-height: 20px;
    height: 20px;
    width:auto;
    min-width: 74px;
    padding: 0 5px 0 5px;
    border-radius: 26rpx;
    border: 2rpx solid #e4e7ed;
    font-size: 26rpx;
    text-align: center;
    background-color: #aaaaaa;
    color: white;
}
.uni-tip {
  border-radius: 0px !important;
  overflow: hidden;
  .popup-content {
    font-size: 14px;
    color: #666;
    padding: 10px 0;
    margin: 0 15px;
  }
  .uni-tip-group-button {
    border-top: none;
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 20px;
    .uni-tip-button {
      border-top: 1px solid #e2e2e2;

      &.confirm {
        border-top: 1rpx solid $base-color;
        border-bottom: 1rpx solid $base-color;
        color: #fff;
        background-color: $base-color;
      }
    }
  }
}
.container {
    height: 100%;
}

.list-scroll-content {
    position: relative;
    // height: 100%;
    height: 800px;
    display: flex;
    // padding-top: 16rpx;
    // padding-bottom: env(safe-area-inset-bottom);
    flex-direction: column;
    flex-shrink: 0;
}

.tag {
    font-size: 24upx;
    width: fit-content;
    text-align: center;
    color: $base-color;
    margin-right: 10upx;
    background: #fffafb;
    border: 1px solid #ffb4c7;
    border-radius: 4upx;
    padding: 0upx 5upx;
    line-height: 1;
}
.second-list{
    font-size: 12px;
    color: #aaaaaa;
}
.list-cell {
    // display: flex;
    // align-items: baseline;
    padding: 20upx $page-row-spacing;
    line-height: 60upx;
    position: relative;
    background: #fff;
    justify-content: space-between;

    &.log-out-btn {
        margin-top: 30upx;

        .cell-tit {
            color: $uni-color-primary;
            text-align: center;
            margin-right: 0;
        }
    }

    &.cell-hover {
        background: #fafafa;
    }

    &.b-b:after {
        left: 30upx;
    }

    &.m-t {
        margin-top: 16upx;
    }

    .cell-more {
        align-self: baseline;
        font-size: $font-lg;
        color: $font-color-light;
        margin-left: 10upx;
    }

    .cell-tit {
        flex: 1;
        font-size: $font-sm ;
        color: $font-color-dark;
        margin-right: 10upx;
    }

    .cell-tip {
        font-size: $font-base;
        color: $font-color-light;
    }

    switch {
        transform: translateX(16upx) scale(.84);
    }
}</style>
